<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-06-30 15:24:21
 * @LastEditTime: 2021-07-01 14:00:56
-->
<template>
  <div>
    <div class="tabConBox" ref="TableHeight" :style="{ height: onresizeHeight + 'px' }">
      <div class="tab" :style="{ height: '100%', overflowY: 'auto' }">
        <table class="tabBox" v-for="(item, index) in unitDTOS" :key="index">
          <tr class="title tabCommon">
            <th v-if="productType != 3">
              {{ productType == 1 ? "楼层" : "分区" }}
            </th>
            <th :colspan="isImported ? item.maxRoomCount : item.roomSetCount">
              <Checkbox v-model="item.isSelected" @on-change="
                    (event) => {
                      return unitOnclick(
                        event,
                        item.unitId,
                        'unit',
                        item.unitId
                      );
                    }
                  "></Checkbox>
              <span v-if="isControl">{{ item.unitName }}</span>
              <Poptip v-else trigger="hover">
                {{ item.unitName }}
                <div slot="content">
                  <div class=" impotBtn" @click="updataUnitNameClick(item.unitId)">
                    修改名称
                  </div>
                  <div class="impotBtn" @click="delUnitName(item.unitId)">
                    删除
                  </div>
                </div>
              </Poptip>
            </th>
          </tr>

          <tr class="subtitle tabCommon">
            <td v-if="productType != 3">&nbsp;</td>
            <td v-for="(colsItem, index) in item.colsData" :key="index">
              <Checkbox v-model="colsItem.isSelected" @on-change="
                    (event) => {
                      return unitOnclick(event, index, 'cols', item.unitId);
                    }
                  "></Checkbox>
              <!-- {{ isImported ? "全列" : "房间" }} -->
              全列
            </td>
          </tr>

          <tr class="floor tabCommon" v-for="(floorItem, index) in item.floorDTOS"
            :key="index">
            <td class="floorNum" v-if="productType != 3">
              <Checkbox v-model="floorItem.isSelected" @on-change="
                    (event) => {
                      return unitOnclick(
                        event,
                        floorItem.floorId,
                        'floor',
                        item.unitId
                      );
                    }
                  "></Checkbox>
              <span
                v-if="isControl">{{ productType == 1 ? index + 1 : floorItem.floorName }}</span>
              <Poptip v-else trigger="hover">
                <!-- {{  index + 1 }} -->
                {{ productType == 1 ? index + 1 : floorItem.floorName }}
                <div slot="content">
                  <div class="impotBtn" @click="delFloor(item.unitId, floorItem.floorId)">
                    删除
                  </div>
                </div>
              </Poptip>
            </td>
            <td v-for="(roomItem, roomIndex) in floorItem.roomDTOS" :key="roomIndex"
              :class="{'orderVal':roomItem.sellStatus==3||roomItem.sellStatus==4}"
              :style="'background:'+roomItem.statusColor+';'">
              <Checkbox v-if="!roomItem.unControl" v-model="roomItem.isSelected" @on-change="
                    (event) => {
                      return unitOnclick(
                        event,
                        roomItem.roomId,
                        'room',
                        item.unitId,
                        roomIndex
                      );
                    }
                  "></Checkbox>
              <span v-else style="margin-right: 26px;" />

              <Poptip trigger="hover" popper-class='popperClass'>
                <span style="font-weight: 500;"
                  :style="'color:' + ((roomItem.statusColor && roomItem.statusColor!='#FFFFFF') ? 'white;' : ';')">
                  {{ roomItem.roomCode }}
                </span>

                <div slot="content" class="popAll">

                  <div class="popCon">
                    <p><span>房源名称：</span><span>{{roomItem.roomName}}</span></p>
                    <p><span>售卖状态：</span><span>{{$formatter.switchName('salesStatus',roomItem.sellStatus)}}</span></p>
                    <template v-if="isControl">
                      <p><span>认购日期：</span><span>{{roomItem.subscriptionDate}}</span></p>
                      <p><span>认购顾问：</span><span>{{roomItem.counselorName}}</span></p>
                      <p><span>签约日期：</span><span>{{roomItem.contractDate}}</span></p>
                      <p><span>签约姓名：</span><span>{{roomItem.contractorName}}</span></p>
                      <p><span>客户姓名：</span><span>{{roomItem.customerName}}</span></p>
                    </template>
                    <template v-else>
                      <p><span>关联户型：</span><span>{{roomItem.roomType?roomItem.roomType:''}}</span></p>
                      <p><span>面积：</span><span>{{roomItem.area}}㎡</span></p>
                      <p><span>赠送面积：</span><span>{{roomItem.giveArea}}㎡</span></p>
                      <p><span>表单价：</span><span>{{roomItem.facePrice}}元</span></p>
                      <p><span>表总价：</span><span>{{roomItem.faceTotalPrice}}元</span></p>
                      <p><span>底单价：</span><span>{{roomItem.basicPrice}}元</span></p>
                      <p><span>底总价：</span><span>{{roomItem.basicTotalPrice}}元</span></p>
                    </template>
                    
                  </div>
                </div>
              </Poptip>

            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'houseRoom',
    // 房间数据 、 产品类型、是否导入过数据、
    props: ['unitDTOS', 'productType', 'isImported', 'isControl'],
    data() {
      return {
        onresizeHeight: '',
        roomEditVOS: [],
      }
    },
    components: {},
    watch: {
      unitDTOS(newVal) {
        this.unitDTOS = newVal
      },
      productType(newVal) {
        this.productType = newVal
      },

      isImported(newVal) {
        this.isImported = newVal
      },
    },

    mounted() {
      // this.getPlateTreeData()
      setTimeout(() => {
        this.onresizeHeight =
          window.innerHeight - this.$refs.TableHeight.offsetTop - 50
      }, 200)
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            this.onresizeHeight =
              window.innerHeight - this.$refs.TableHeight.offsetTop - 50
          }, 10)
        })()
      }
    },
    methods: {
      delFloor(unitId, floorId) {
        this.$parent.delFloor(unitId, floorId)
      },
      // poptit 删除单元
      delUnitName(unitId) {
        this.$parent.delUnitName(unitId)
      },
      updataUnitNameClick(val) {
        this.$parent.updataUnitNameClick(val)
      },
      addIsSelected(obj, val) {
        this.$set(obj, 'isSelected', val)
      },
      // 表格操作选中不选中
      unitOnclick(event, levelId, levelName, fatherId, roomIndex) {
        console.log(event, levelId, levelName, '选中单元')
        if (levelName == 'unit') {
          // 方法一
          let ind = this.unitDTOS.findIndex((item) => {
            return item.unitId == levelId
          })
          this.addIsSelected(this.unitDTOS[ind], event)

          this.unitDTOS[ind].colsData.forEach((colsItem) => {
            this.addIsSelected(colsItem, event)
          })

          this.unitDTOS[ind].floorDTOS.forEach((floorItem) => {
            this.addIsSelected(floorItem, event)
            if (floorItem.roomDTOS) {
              floorItem.roomDTOS.forEach((roomItem) => {
                this.addIsSelected(roomItem, event)
              })
            }
          })
        } else if (levelName == 'floor') {
          let ind = this.unitDTOS.findIndex((item) => {
            return item.unitId == fatherId
          })
          let indFloor = this.unitDTOS[ind].floorDTOS.findIndex((floorItem) => {
            return floorItem.floorId == levelId
          })
          this.addIsSelected(this.unitDTOS[ind].floorDTOS[indFloor], event)
          this.unitDTOS[ind].floorDTOS[indFloor].roomDTOS.forEach((roomItem) => {
            this.addIsSelected(roomItem, event)
          })
        } else if (levelName == 'cols') {
          console.log(event, levelId, levelName, fatherId, 'cols')
          let ind = this.unitDTOS.findIndex((item) => {
            return item.unitId == fatherId
          })
          this.unitDTOS[ind].floorDTOS.forEach((floorItem) => {
            if (floorItem.roomDTOS) {
              console.log(
                floorItem.roomDTOS,
                floorItem.roomDTOS[levelId],
                'floorItem.roomDTOS[levelId]'
              )
              if (floorItem.roomDTOS[levelId]) {
                this.addIsSelected(floorItem.roomDTOS[levelId], event)
              }
            }
          })
        }

        // 单元的选中按钮

        let ind = this.unitDTOS.findIndex((item) => {
          return item.unitId == fatherId
        })

        let unitFlag = this.unitDTOS[ind].floorDTOS.some((floorItem) => {
          return floorItem.roomDTOS.some((roomItem) => {
            return roomItem.isSelected == false
          })
        })

        if (unitFlag) {
          this.unitDTOS[ind].isSelected = false
        } else {
          this.unitDTOS[ind].isSelected = true
        }

        // 楼层的选中按钮

        this.unitDTOS[ind].floorDTOS.forEach((floorItem) => {
          let floorFlag = floorItem.roomDTOS.some((roomItem) => {
            return roomItem.isSelected == false
          })
          if (floorFlag) {
            floorItem.isSelected = false
          } else {
            floorItem.isSelected = true
          }
        })

        // 列的选中按钮
        let i
        let roomFlag = this.unitDTOS[ind].floorDTOS.some((floorItem) => {
          return floorItem.roomDTOS.some((roomItem, index) => {
            i = index
            return roomItem.isSelected == false
          })
        })
        if (roomFlag) {
          this.unitDTOS[ind].colsData[i].isSelected = false
        }
        if (levelName == 'room') {
          let roomFlag2 = this.unitDTOS[ind].floorDTOS.every(
            (floorItem, index) => {
              if (floorItem.roomDTOS[roomIndex]) {
                return floorItem.roomDTOS[roomIndex].isSelected == true
              } else {
                return true
              }
            }
          )
          if (roomFlag2) {
            this.unitDTOS[ind].colsData[roomIndex].isSelected = true
          } else {
            this.unitDTOS[ind].colsData[roomIndex].isSelected = false
          }
        }
        this.roomEditVOS = []
        this.unitDTOS.forEach((item) => {
          item.floorDTOS.forEach((floorItem) => {
            floorItem.roomDTOS.forEach((roomItem) => {
              if (roomItem.isSelected == true) {
                this.roomEditVOS.push(roomItem)
              }
            })
          })
        })

        console.log(this.roomEditVOS, '即将操作的房间列表')
        // this.unitDTOSLength = this.roomEditVOS ? this.roomEditVOS.length : 0
        this.$emit('roomSelChange', this.roomEditVOS)
      },
      connectorFormat(val) {
        if (val == '1') {
          return ''
        } else if (val == '2') {
          return '-'
        } else if (val == '3') {
          return '#'
        } else {
          return ' '
        }
      },
    },
    created() {
      this.$nextTick(function() {
        console.log(this.$refs.TableHeight.offsetTop, 'this.$refs.TableHeight')
        this.onresizeHeight =
          window.innerHeight - this.$refs.TableHeight.offsetTop - 50
      })
    },
  }
</script>
<style lang='scss' scoped>
  .tabConBox {
    width: 100%;
    overflow: hidden;
  }

  .tab {
    padding: 0 20px 0 0;
    display: flex;
    flex-direction: row;
    // padding: 20px;
    width: 100%;
    overflow-x: auto;

    .tabBox {
      height: fit-content;

      input {
        margin: 5px;
        vertical-align: -2px;
      }
    }
  }

  table {
    margin: 5px;
    border-collapse: collapse;
    border: 1px solid #dcdee2;
  }

  td,
  th {
    border-collapse: collapse;
    border: 1px solid #dcdee2;
    padding: 0 20px;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    min-width: 110px;
  }

  .impotBtn {
    line-height: 2;
    cursor: pointer;
    color: #2d8cf0;
    text-align: center;
    font-weight: normal;

    &:first-child {
      border-bottom: 1px #e8eaec solid;
    }
  }

  .updataUnitNameBox {
    padding: 20px;
  }

  .updataModal {
    z-index: 1061;
  }

  .creatFloorBox {
    max-height: 450px;
    overflow-y: auto;

    p {
      display: flex;
      flex-direction: row;
      min-height: 50px;
      margin-top: 10px;

      span {
        line-height: 32px;
        flex: 0 0 90px;
        text-align: right;
      }
    }
  }

  .popAll {
    .popCon {
      p {
        line-height: 2.5;
        overflow: hidden;

        span {
          float: left;
        }

        span:first-child {
          display: inline-block;
          width: 80px;
        }
      }
    }
  }

  .orderVal {
    background: #f8f8f9;
  }
</style>
<style>
  .popperClass .ivu-poptip-inner {
    background: rgba(235, 247, 255, 1) !important;
  }
</style>
